<template>
  <!--TODO 搜索结果 跟 添加音乐的音乐列表 暂时先这样放着 后期在维护 -->
  <el-dialog
    :title="titleSub"
    :visible="visible"
    :before-close="closeHandler"
    center
    custom-class="toast-class"
    width="80%"
  >
    <!-- 自定义歌单里的歌 -->
    <ul class="search-res" v-show="searchRes.length">
      <!-- 每一列 -->
      <li class="res-item" v-for="res in searchRes" :key="res.musicId">
        <!-- 音乐名称以及歌手名称 -->
        <div class="name">{{ res.name }}-{{ res.author }}</div>

        <!-- 只有在自定义歌单打开才显示下面的内容 -->
        <template v-if="data['isCustom']">
          <!-- 添加/移除到自定义歌单 -->
          <!-- 移除  -->
          <div
            @click="changeSelValHandler(res)"
            class="operation"
            v-show="selVal.includes(res['musicId'])"
          >
            <img src="../../assets/index/yes.png" alt="" />
          </div>
          <!-- 添加 -->
          <div
            @click="changeSelValHandler(res)"
            class="operation"
            v-show="!selVal.includes(res['musicId'])"
          >
            <img src="../../assets/index/no.png" alt="" />
          </div>
        </template>
      </li>
    </ul>
    <!-- 空状态 -->
    <EmptyTips v-show="!searchRes.length" tips="无匹配结果"></EmptyTips>
  </el-dialog>
</template>


<script>
import EmptyTips from "@/components/public/EmptyTips";
import { mapActions, mapState } from "vuex";
export default {
  name: "SearchResult",
  props: ["keyword", "visible", "data"],
  components: { EmptyTips },
  data() {
    return {
      /* 选择的歌 */
      selVal: [],
    };
  },
  watch: {
    /* 监听已有的歌 */
    "data.toastData": {
      handler(val) {
        if (val) {
          /* 将已有的歌id push到selVal里 */
          this.data.toastData.forEach((x) => this.selVal.push(x["musicId"]));
        } else {
          /* 将选择置空 防止样式出问题 */
          this.selVal = [];
        }
      },
    },
  },

  computed: {
    /* 音乐数据 */
    ...mapState("music", ["musicData"]),
    /* 拼接字符串 作为弹出层的标题 */
    titleSub() {
      return this.keyword ? `关键字【${this.keyword}】搜索结果` : "添加音乐";
    },
    /* 弹出的数据 */
    searchRes() {
      return this.musicData.filter((x) => x.name.indexOf(this.keyword) !== -1);
    },
  },
  methods: {
    /* 添加/移除 当前自定义歌单里的音乐 */
    ...mapActions("music", ["musicListPushRemove"]),
    /* 改变选择框中的内容 */
    changeSelValHandler(res) {
      /* 查找选择框中的id 如果存在就移除 否则就追加 */
      const findIdx = this.selVal.indexOf(res.musicId);
      /* 等于-1就是没有找到 */
      if (findIdx === -1) {
        this.selVal.push(res.musicId);
      } else {
        this.selVal.splice(findIdx, 1);
      }
      /* 组装新obj 传去后台*/
      const obj = {
        /* 当前音乐对象 */
        musicData: res,
        /* 当前自定义歌单名称 */
        name: this.data["title"],
      };
      /* 提交后台API */
      this.musicListPushRemove(obj);
    },
    /* 关闭当前弹出层的回调 */
    closeHandler() {
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="less" scoped>
.search-res {
  color: #aaa;
  height: 8rem;
  overflow: auto;
  .res-item {
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    .name {
      width: 3rem;
    }
    .operation {
      margin-left: 1rem;
      width: 0.3rem;
      height: 0.3rem;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>